<template>
    <view class="page">
        <!-- 数据详情 -->
        <view class="item">
            <view class="item_detail flex_wrap row_between">
                <image
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/02/20/278153e0ff874d978b06775f4cc5b809.png"
                    mode="scaleToFill"
                />
                <view>
                    <text class="total">十蜂健康会员</text>
                    <u-gap height="80rpx" />
                    <view
                        class="flex_wrap row_between"
                    >
                        <u-text
                            text="￥ 365.00"
                            bold
                            size="24rpx"
                        />
                        <u-text
                            text="x 1"
                            size="26rpx"
                            align="right"
                        />
                    </view>
                </view>
            </view>
            <view class="flex_wrap row_right priceBox">
                <view class="price">
                    <text>实付</text>
                    <text
                        class="price_t"
                    >
                        ￥365.00
                    </text>
                </view>
            </view>
        </view>
		<view class="paymentBox">
			<view class="payment">
				<u-text
				    text="付款需知："
					color="#3D3D3D"
				    size="24rpx"
				/>
				<u-text
				    text="1.为避免资金损失，请谨慎判断对方身份后进行支付;"
					color="#3D3D3D"
				    size="24rpx"
					margin="12rpx 0 6rpx"
				/>
				<u-text
				    text="2.为好友代付后，无法对订单进行退款等操作;"
					color="#3D3D3D"
				    size="24rpx"
				/>
			</view>
		</view>
        <view
            class="page_bottom safeAreaBottom"
        >
            <u-button
                text="帮好友付款"
                customStyle="height: 70rpx; border-radius: 35rpx;margin: 0;backgroundColor:#588BF3"
                type="primary"
                @click="pay"
            />
        </view>
    </view>
</template>

<script>
	import store from "@/store";
	import {
		mapGetters
	} from "vuex"
	import caches from "@/config/caches.js";
	import {
		becomeAMemberAndFindSomeoneToPay
	} from "@/api/card.js";
export default {
    data() {
        return {
            payKey:''
        };
    },
    onLoad(options) {
	   this.payKey = options.payKey
       var pages = getCurrentPages(); // 获取栈实例
       console.log(pages, 'pages>>>')
       if (pages.length === 1) {
       	let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
       	let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
       	uni.setStorageSync("loginBackUrl", currentPage);
       }
       if (!this.isLogin) return uni.reLaunch({
       	url: "/pages/user/phone/indexApp"
       })
    },
	computed: mapGetters(["isLogin", "userInfo", "addressList"]),
    methods: {
        async pay() {
        	let data;
        	let params = {
        		payKey: this.payKey,
				appId: this.$appId,
        	};
        	const result = await becomeAMemberAndFindSomeoneToPay(params);
        	data = result.data;
			console.log(data,'data>>>')
        	const that = this;
        	uni.requestPayment({
        		provider: "wxpay",
        		timeStamp: data.timeStamp,
        		nonceStr: data.nonceStr,
        		package: data.packageValue,
        		signType: "MD5",
        		paySign: data.paySign,
        		success: function(res) {
        			if (res.errMsg === "requestPayment:ok") {
        				uni.$u.toast('支付成功！');
        				uni.reLaunch({
        					url: "/pages/my/index"
        				})
        			}
        		},
        		fail: function(err) {
        			console.log("fail:" + JSON.stringify(err));
        		},
        	});
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    background-color: #ffffff;
    height: 100vh;
}

.location {
    padding: 40rpx 26rpx 40rpx 32rpx;
}
.locations {
    width: 100%;
    padding: 0 16rpx 0 26rpx;
    text-align: left;
    &_name {
        font-size: 28rpx;
        color: #3d3d3d;
        font-weight: 500;
        text {
            margin-right: 32rpx;
        }
        .default {
            margin-left: -12rpx;
            width: 86rpx;
            height: 36rpx;
            border-radius: 4rpx;
            border: 2rpx solid #588bf3;
            font-size: 24rpx;
            color: #588bf3;
            display: block;
            text-align: center;
            font-weight: 400;
        }
    }
    &_detail {
        size: 24rpx;
        color: #666;
        font-weight: 400;
    }
}
.item {
    margin: 0 28rpx 0;
}

.item_time {
    height: 80rpx;
    border-bottom: 2rpx solid #f3f3f3;
    padding: 0 24rpx;
}

.item_detail {
    padding: 26rpx 10rpx 0;

    image {
        width: 244rpx;
        height: 158rpx;
        border-radius: 8rpx;
    }
}
.priceBox{
	border-top: 2rpx solid #f3f3f3;
	margin-top: 28rpx;
}
.paymentBox{
	padding: 20rpx 40rpx;
}
.payment{
	background: #F3F3F3;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	padding: 32rpx 30rpx;
}

.total {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size: 32rpx;
}

.detail_tt {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #666666;

    text {
        margin-right: 10rpx;
    }
}

.price {
    height: 72rpx;
    text-align: right;
    font-size: 26rpx;
    color: #ff0000;
    line-height: 72rpx;
    margin-right: 12rpx;

    .price_t {
        font-size: 30rpx;
        font-weight: bold;
    }
}

.payBtn {
    width: 158rpx;
    height: 44rpx;
    line-height: 44rpx;
    font-size: 24rpx;
    margin-right: 0;
    margin-left: 0;
    background: #588bf3;
    color: #ffffff;
    border-radius: 22rpx;
}

.cancelOrderBtn {
    width: 158rpx;
    height: 44rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    margin-right: 40rpx;
    border: 1px solid #e6e6e6;
    border-radius: 22rpx;
}

.massage {
    padding: 16px 14px;
}

.num_list {
    display: flex;
    justify-content: space-between;
    margin-top: 28rpx;

    .num {
        display: flex;
        width: 280rpx;
        justify-content: space-between;
        position: relative;
        .lineThroughOut {
            width: 100%;
            position: absolute;
            border-bottom: 2rpx solid #858585;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            margin: auto;
        }

        .lineThrough {
            text-decoration: line-through;
            color: #858585;
        }

        .blackColor {
            color: #333;
        }

        .grayColor {
            color: #999;
        }
    }

    // .num.lineThrough {
    // 	text-decoration: line-through;
    // 	color: #999999;
    // }

    // .num.blackColor {
    // 	color: #333;
    // }

    // .num.grayColor {
    // 	color: #999;
    // }

    .mag_state.blackColor {
        color: #333;
    }

    .mag_state.blueColor {
        color: #588bf3;
    }

    .mag_state.grayColor {
        color: #999;
    }
}

.page_bottom {
    width: 750rpx;
    min-height: 100rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 8rpx -6rpx 8rpx 0px rgba(0, 0, 0, 0.25);
    padding: 14rpx 28rpx;
}

.connect {
    display: flex;
    line-height: 72rpx;
}

.connect_icon {
    width: 32rpx;
    height: 32rpx;
    vertical-align: middle;
}

.connect_text {
    line-height: 72rpx;
}
</style>
